<template>
	<view class="u-bg-white">
		<!-- 顶部导航 -->
		<fa-navbar title="通讯录"></fa-navbar>
		<view class="content">
			<view class="titleBox">
				<view class="leftImage">
					<image :src="'https://fzsxh.wisherlife.com' + detailList.logo" mode=""></image>
				</view>
				<view class="rightMsg">
					<view class="title">
						{{detailList.name}}
					</view>
					<view class="address">
						<text style="color: #4e4e4e;">地址：</text> {{detailList.address}}
					</view>
				</view>
			</view>
			<view class="contactBox">
				<view class="introduce" @click="goBriefIntroduction(detailList.id)">
					<view class="text">
						<text style="color: #d9001b;">商会简介：</text>
						{{detailList.info}}
					</view>
					<view class="icon">
						<u-icon name="arrow-right" ></u-icon>
					</view>
				</view>
				<view class="contact" @tap="call(detailList.mobile)">
					联系秘书处
				</view>
			</view>
			<view class="contentBox">
				<!-- 一级 -->
				<view class="contentItem" v-for="(item,index) in memberList" :key="index">
					<view class="title" v-if="!item.isCheck" @click="openList(item.value,index)">
						<view class="name">
							{{item.name}} ({{item.num}})
						</view>
						<view class="icon">
							<u-icon name="arrow-down" ></u-icon>
						</view>
					</view>
					<view class="title" v-if="item.isCheck" @click="closeList(index)">
						<view class="name">
							{{item.name}} ({{item.num}})
						</view>
						<view class="icon">
							<u-icon name="arrow-up"></u-icon>
						</view>
					</view>
					
					<!-- 二级 -->
					<view class="content" v-for="(v,i) in menberUserList" :key="i" v-if="item.isCheck && (v.role_id == item.value || item.value == 0)" @click="openUview(v.id)">
						<view class="leftImage">
							<image :src="v.avatar" mode=""></image>
						</view>
						<view class="right">
							<view class="name">
								{{v.nickname}}
							</view>
							<view class="company">
								{{v.company}}
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
		<template>
			<view class="popup">
				<u-popup :show="show" border-radius="20" @close="close"  v-model="show" mode="center">
					<view class="message">
						<view class="left">
							<image :src="roleDetails.avatar" mode=""></image>
						</view>
						<view class="right">
							<view class="name"> {{roleDetails.nickname}} </view>
							<view class="company"> {{roleDetails.company}}  </view>
							<view class="mobile"> {{roleDetails.secret_mobile}} </view>
						</view>
					</view>
					<view class="dialPhone" @tap="call(roleDetails.mobile)"> 拨打电话 </view>
				</u-popup>
			</view>
		</template>
		<!-- 底部导航 -->
		<!-- <fa-tabbar></fa-tabbar> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// pageInfo: {}
				open: false,
				detailId: '',
				detailList: [],
				memberList: [],
				menberUserList: [],
				twoValue: '',
				// isCheck:false
				show:false,
				//角色详情
				roleDetails:[]

			};
		},
		onLoad(options) {
			console.log(options, 'options');
			this.detailId = options.id
			this.getOrganizationDetail()
			this.getMemberList()
		},
		methods: {
			// 打开弹窗
			
			 openUview(e) {
				console.log(e,'id');
				this.show = true
				this.menberUserList.map(v => {
					// console.log(v,'vvv');
					if(e == v.id) {
					console.log(v,'vvv');
					this.roleDetails = v
					}
				})
				// this.organizationList = res.data
				
			},
			// 关闭弹窗
			close() {
				this.show = false
			},
			// 协会详情
			async getOrganizationDetail() {
				let data = {
					id: this.detailId
				}
				let res = await this.$api.getAssociationDetails(data)
				// console.log(res, 'res')
				if (!res.code) {
					this.$u.toast(res.msg)
					return
				}
				this.detailList = res.msg
			},
			// 协会详情
			async getMemberList() {
				let data = {
					id: this.detailId
				}
				let res = await this.$api.getMemberList(data)
				console.log(res, 'res')
				if (!res.code) {
					this.$u.toast(res.msg)
					return
				}
				let newArr = []
				res.data.map(v => {
					v.isCheck = false
					console.log(v, 'vvv');
					newArr.push(v)
				})
				this.memberList = newArr
				console.log(this.memberList, 'menber');

			},
			call(mobile) {
				let phone = mobile
				uni.makePhoneCall({
					phoneNumber: phone,
					success: function() {
						console.log('拨打电话成功');
					},
					fail() {
						console.log('打电话失败了');
					}
				})
			},


			async openList(value, index) {
				// this.menberUserList = []
				this.memberList[index].isCheck = true
				// this.isCheck = true
				this.twoValue = value
				let data = {
					id: this.detailId,
					role_id: value
				}
				let res = await this.$api.getMemberUserList(data)
				console.log(res, 'res')
				if (!res.code) {
					this.$u.toast(res.msg)
					return
				}
				this.menberUserList = [...this.menberUserList,...res.data]
				function fn1(tempArr) {
				    for (let i = 0; i < tempArr.length; i++) {
				        for (let j = i + 1; j < tempArr.length; j++) {
				            if (tempArr[i].id == tempArr[j].id) {
				                tempArr.splice(j, 1);
				                j--;
				            };
				        };
				    };
				    return tempArr;
				};
				fn1(this.menberUserList)
				console.log(this.menberUserList,'this.menberUserList');
				this.menberUserList.map(v => {
					console.log(v,'vv');
				})
				
				


			},
			closeList(index) {
				this.memberList[index].isCheck = false
				// this.menberUserList = []
				// this.menberUserList[index] = []
				// this.isCheck = false
			},
			goBriefIntroduction(id) {
				// console.log('111');
				uni.navigateTo({
					url: `/pages/my/briefIntroduction?id=${id}`
				})
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f4f6f8;
	}
	.popup {
		::v-deep .u-drawer__scroll-view {
			padding: 30rpx 25rpx 30rpx 28rpx;
			width: 620rpx !important;
			height: 483rpx !important;
			box-sizing: border-box !important;
			// border-radius: 10rpx;
	
			.message {
				display: flex;
				width: 100%;
	
				// background-color: green;
				.left {
					width: 212rpx;
					// background-color: skyblue;
					height: 282rpx;
	
					image {
						width: 100%;
						height: 100%;
					}
				}
	
				.right {
					flex: 1;
					padding-left: 34rpx;
	
					// background-color: red;
					// margin-top: -5rpx;
					.name {
						font-size: 30rpx;
						font-weight: bold;
					}
	
					.company {
						font-size: 26rpx;
						color: #656565;
						margin-top: 17rpx;
					}
	
					.mobile {
						margin-top: 7rpx;
						font-size: 26rpx;
						color: #656565;
					}
				}
			}
	
			.dialPhone {
				margin-top: 50rpx;
				width: 567rpx;
				height: 80rpx;
				text-align: center;
				background-color: #c72a29;
				color: #fff;
				line-height: 80rpx;
				font-size: 30rpx;
				border-radius: 10rpx;
			}
		}
	}

	.content {
		// padding: 30rpx;

		.titleBox {
			width: 100%;
			height: 121rpx;
			padding: 30rpx;
			// background-color: skyblue;
			display: flex;

			.leftImage {
				width: 114rpx;
				height: 114rpx;

				image {
					width: 100%;
					height: 100%;
					margin-top: 3rpx;
					border-radius: 10rpx;
				}
			}


			.rightMsg {
				width: 540rpx;
				padding-left: 30rpx;

				.title {
					font-size: 30rpx;
					font-weight: bold;
					margin-top: -4rpx;
				}

				.address {
					font-size: 24rpx;
					color: #4e4e4e;
					padding-top: 17rpx;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden; //溢出内容隐藏
					text-overflow: ellipsis; //文本溢出部分用省略号表示
					display: -webkit-box; //特别显示模式
					-webkit-line-clamp: 2; //行数
					line-clamp: 2;
					-webkit-box-orient: vertical; //盒子中内容竖直排列

				}
			}
		}

		.contactBox {
			padding: 30rpx;

			.introduce {
				// text-align-last: justify;
				width: 100%;
				margin-top: 15rpx;
				display: flex;
				justify-content: space-between;

				.text {
					text-align: justify;
					width: 623rpx;
					font-size: 24rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 4;
				}

				.icon {
					font-size: 50rpx;
					margin-top: 30rpx;
				}
			}

			.contact {
				margin-top: 15rpx;
				width: 688rpx;
				height: 67rpx;
				background-color: #d9001b;
				text-align: center;
				line-height: 67rpx;
				font-size: 26rpx;
				border-radius: 10rpx;
				color: #fff;

			}
		}

		.contentBox {

			// margin-top: 10rpx;
			.contentItem {
				.title {
					width: 750rpx;
					height: 124rpx;
					border-bottom: 1rpx solid #eeeeee;
					// background-color: skyblue;
					padding-left: 35rpx;
					line-height: 124rpx;
					display: flex;
					justify-content: space-between;

					.name {}

					.icon {
						padding-right: 50rpx;
					}
				}

				.content {
					height: 145rpx;
					// background-color: skyblue;
					border-bottom: 1rpx solid #eee;

					display: flex;

					.leftImage {
						width: 90rpx;
						height: 90rpx;
						// padding-left: 57rpx;
						margin-left: 57rpx;
						margin-top: 35rpx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}

					.right {
						// padding-left: 170rpx;
						margin-left: 23rpx;
						margin-top: 40rpx;

						.name {
							font-size: 28rpx;
							font-weight: bold;
						}

						.company {
							font-size: 22rpx;
							// margin-top: -12rpx;
							color: #656b6c;
							width: 500rpx;
							white-space: nowrap;

							overflow: hidden;

							text-overflow: ellipsis;
						}
					}
				}

			}

		}
	}
</style>
